<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>赠一得一 · 好友免费请你读</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<!--<script src="//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>-->
		<style type="text/css">
			body,html{
				height:auto;
			}
			
			body:before {
				border: 0;
				display: block;
				height: 1px;
				content: '';
			}
			
			.hide {
				display: none;
			}
			
			.activity_topView .top_bookimg{
				position: absolute;
				box-shadow: 0 0 0.52rem 0.52rem #eff0f5;
				left: 4.16rem;
				top: 3.12rem;
				width: 12.8rem;
				height: 16.64rem;
				z-index: 10;
			}
			
			.activity_topView .top_bookname{
				width: 16rem;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				position: absolute;
				left: 19rem;
				color: #1f2028;
				font-size: 2rem;
				top: 5.72rem;
			}
			
			.activity_topView .top_authorName{
				position: absolute;
				left: 19rem;
				color: #1f2028;
				font-size: 1.46rem;
				top: 9rem;
			}
			
			.activity_topView .top_bigView{
				position: absolute;
				top: 13.2rem;
				border-radius: 0.6rem;
				left: 1.3rem;
				right: 1.3rem;
				width: auto;
				height: 21.8rem;
				box-shadow: 0 0 0.52rem 0.52rem #eff0f5;
				background-color: white;
			}
			
			.top_bigView .top_bookPush{
				position: absolute;
				left: 2.86rem;
				right: 2.86rem;
				top: 8.58rem;
				color: #363c43;
				font-size: 1.56rem;
			}
			
			.top_bigView .top_nickname{
				position: absolute;
				right: 2.86rem;
				top: 17.42rem;
				color: #888b90;
				font-size: 1.3rem;
			}
			
			.activity_topView .top_desStr{
				position: absolute;
				left: 3%;
				width: 94%;
				text-align: center;
				top: 36.6rem;
				color: #888b90;
				font-size: 1.3rem;
			}
			
			.activity_topView .giveBtn{
				border: 0;
				position: absolute;
				top: 38.2rem;
				border-radius: 0.6rem;
				left: 3%;
				width: 94%;
				height: 5.2rem;
				color: black;
				font-size: 1.87rem;
				background-color: #ffda43;
			}
			
			.activity_topView .top_desStr1{
				position: absolute;
				top: 44.4rem;
				left: 3%;
				width: 94%;
				color: #888b90;
				font-size: 1.3rem;
				text-align: center;
			}
			
			.activity_topView .top_receiveInfo{
				position: absolute;
				width: 100%;
				top: 49.6rem;
				left: 0;
				height: 7.8rem;
			}
			
			.activity_topView #lineView{
				position: absolute;
				width: 94%;
				top: 57rem;
				background-color: #E6E6E6;
				left: 3%;
				height: 0.1rem;
			}
			
			.top_receiveInfo .top_face{
				position: absolute;
				border-radius: 2.6rem;
				border: 1px solid #eff0f5;
				top: 0;
				left: 2.2rem;
				width: 5.2rem;
				height: 5.2rem;
			}
			
			.top_receiveInfo .top_receiveAuthor{
				position: absolute;
				top: 1.3rem;
				left: 8.32rem;
				font-size: 1.66rem;
				color: #333333;
			}
			
			.top_receiveInfo .top_receiveDate{
				position: absolute;
				top: 1.45rem;
				right: 2.2rem;
				font-size: 1.3rem;
				color: #888b90;
			}
			
			.alertView .follow-mask {
				position: fixed; 
				top: 0; 
				bottom: 0; 
				left: 0;
				right: 0;
				background: rgba(38,38,38,0.66);
				z-index: 100;
			}
			
			.alertView .book_receive_top{
				position: fixed;
				background-color: white;
				border-radius: 0.82rem;
				top: 25%;
				width: 80%;
				left: 10%;
				height: 28.1rem;
				z-index: 120;
			}
			
			.book_receive_top .book_receive_top_title{
				position: absolute;
				top: 1.3rem;
				width: 100%;
				text-align: center;
				font-size: 2.08rem;
				font-weight: bold;
				color: #333333;
			}
			
			.book_receive_top .book_receive_top_des{
				position: absolute;
				text-align: center;
				top: 5.2rem;
				width: 80%;
				left: 10%;
				font-size: 1.56rem;
				color: #333333;
			}
			
			.book_receive_top #book_receive_top_img{
				position: absolute;
				top: 9.62rem;
				width: 40%;
				height: auto;
				left: 30%;
			}
			
			.book_receive_top .book_receive_top_alert{
				position: absolute;
				top: 24.18rem;
				width: 80%;
				left: 10%;
				text-align: center;
				font-size: 1.45rem;
				color: #999999;
			}
			
			.free_List ul li ,.random_List ul li {
				float: left;
				height: 18rem;
				width: 9.17rem;
				margin: 0rem 1.2rem;
				position: relative;
			}
		</style>
	</head>
	<body style="width: 100%;height: auto;padding: 0;">
		<div class="center">
			<div class="activity_topView">
				<img class="top_bookimg" src="img/book.png"/>
				<p class="top_bookname"></p>
				<p class="top_authorName"></p>
				<div class="top_bigView">
					<p class="top_bookPush"></p>
					<p class="top_nickname"></p>
				</div>
				<p class="top_desStr hide"></p>
				<button class="giveBtn hide"></button>
				<p class="top_desStr1 hide"></p>
				<div class="top_receiveInfo hide">
					<img class="top_face" src="img/img_author.png"/>
					<p class="top_receiveAuthor"></p>
					<p class="top_receiveDate"></p>
				</div>
				<div id="lineView"></div>
			</div>
			<div class="alertView hide">
				<div class="follow-mask"></div>
				<div class="book_receive_top">
					<p class="book_receive_top_title"></p>
					<p class="book_receive_top_des"></p>
					<img id="book_receive_top_img" src="" />
					<p class="book_receive_top_alert">扫描二维码</p>
				</div>
			</div>
			<!--书籍列表-->
			<div id="book_list" style="top: 60rem; width: 100%; left: 0; position: absolute;">
				<!--免费书籍-->
				<div id="free_container">
					<div class="free_Item_title" align="center">
						<p style="left:0;right:0;font-weight: bolder;font-size: 1.5rem;color: #534f4b;padding-bottom: 1.5rem;">本期全部免费好书</p>
					</div>
				</div>
				<div class="free_List" style="padding: 0 1.2rem;"><ul id="free_book" style="overflow: hidden;"></ul></div>
				<script type="text/html" id="free_Item">
					{{each data.book_list}}
					<li>
						<div class="free_Item_div">
					       <img class="book_img" src= {{"http://img.readerday.com/cover/" + $value.bookimg}} style="width: 9.17rem; height: 12rem; box-shadow: 0 0 0.52rem 0.52rem #eff0f5;background: url(img/book_img.png) no-repeat center center;">
					       <img src="icon/listen.png" style="width: 1.6rem; height: 1.6rem; margin-left: 7.0rem; margin-top: -2.0rem;"/>
					       <p style="font-size: 1.4rem; width: 9.17rem; color: #333333; margin-top: 1.0rem; overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;">{{$value.bookname}}</p>
		                </div>
					</li>
					{{/each}}
				</script>
				<!--随机书籍-->
				<div id="random_container">
					<div class="random_Item_title" align="center">
						<p style="left:0;right:0;font-weight: bolder;font-size: 1.5rem;color: #534f4b; padding-bottom: 1.5rem;">可能感兴趣的书</p>
					</div>
				</div>
				<div class="random_List" style="padding: 0 1.2rem;"><ul id="random_book" style="overflow: hidden;"></ul></div>
				<script type="text/html" id="random_Item">
					{{each data}}
					<li>
						<div class="random_Item_div" data-bookid="{{$value.bookid}}" data-videoauthorid="{{$value.videoauthorid}}" data-copywriter="{{$value.copywriter}}">
					       <img class="book_img" src= {{"http://img.readerday.com/cover/" + $value.bookimg}} style="width: 9.17rem; height: 12rem; box-shadow: 0 0 0.52rem 0.52rem #eff0f5; background: url(img/book_img.png) no-repeat center center;">
					       <img src="icon/listen.png" style="width: 1.6rem; height: 1.6rem; margin-left: 7.0rem; margin-top: -2.0rem;"/>
					       <p style="font-size: 1.4rem; width: 9.17rem; color: #333333; margin-top: 1rem;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical; overflow: hidden;text-overflow: ellipsis;">{{$value.bookname}}</p>
		                </div>
					</li>
					{{/each}}
				</script>
			</div>
		</div>
	</body>
	<script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/purl.js"></script>
	<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/aui-toast.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/aui-dialog.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/wxrem.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		document.writeln("<script type=\"text/javascript\" src=\"js/common.js?"+ Math.random() + "\"></scr"+"ipt>");
    </script>
	<script type="text/javascript">
        (function() {
            var mta = document.createElement("script");
            mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
            mta.setAttribute("name", "MTAH5");
            mta.setAttribute("sid", "500636065");
            mta.setAttribute("cid", "500636067");
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(mta, s);
        })();
		var toast = new auiToast();
		var bookid = GetQueryString('bookid');//书ID
        var videoauthorid = GetQueryString('videoauthorid');
        var copywriter = GetQueryString('copywriter');
		var bookname = GetQueryString('bookname');//书名
		var cover = GetQueryString('cover');//封面
		var authorName = GetQueryString('authorName');//主播
		var bookPush = GetQueryString('bookPush');//推荐语
		var nickname = GetQueryString('nickname');//推荐人昵称
		var unionid2 = GetQueryString('unionid2');//分享人unionid
		var channel = GetQueryString('channel');//分享渠道
		var readCount = GetQueryString('readCount');//阅读数
		var ercode;// 二维码
		
		document.getElementsByTagName('img')[0].setAttribute('src',imgHosturl + cover);//封面
		$('.top_bookname').text(bookname);
		$('.top_authorName').text(authorName);
		$('.top_bookPush').text(bookPush);
		$('.top_nickname').text(nickname);
		
		var getUserInfo = function(type){
			if (userVip.type != 1) { //忽略过期的情况
				userVip.type = 0;
			}
			var url = 'order/getgiveone?unionid=' + unionid + "&unionid2=" + unionid2 + "&bookid=" + bookid + "&isvip=" + userVip.type;
			$.ajax({
				type: "get",
				url: hostUrl + url,
				success: function(data) {
					if (type == 1) {
						toast.hide();
					}
					ercode = data.data.qrcode;
					console.log(data)
					updateShareData(data.data.isorder);
					updateReceiveData(data.data);
				},
				
				error: function(){
					if (type == 1) {
						toast.hide();
					}
				}
			});
		};
		getToken(getUserInfo);
		
		var getFreeBookList = function(){
			$.ajax({
				type:"get",
				url:hostUrl + "other/giveonewindow?unionid=" + unionid,
				async:true,
				success: function(data) {
					if(!data.data) return
					document.getElementById('free_book').innerHTML = template("free_Item", data);
				}
			});
		}
		getFreeBookList();
		//全部免费听书列表
		var getRandomBookList = function(){
			$.ajax({
				type:"get",
				url:hostUrl + "other/random/book",
				async:true,
				success: function(data) {
					document.getElementById('random_book').innerHTML = template("random_Item", data);
				}
			});
		}
		getRandomBookList();
		//可能感兴趣的书
		var updateShareData = function(isorder){
			var title;
			if (isorder == 1 || userVip.type == 1) {//已经购买、是会员
				title = nickname + "送了一本《" + bookname + "》给你，立即领取";
			} else{
				var userInfo=JSON.parse(sessionStorage.getItem('weixinData')).data.userInfo;
				relink = decodeURIComponent(relink);
				var urlArr = relink.split('url=');
				var urlArr1 = urlArr[1].split('unionid2=');
				relink = urlArr[0] + "url=" + encodeURIComponent(urlArr1[0] + "unionid2=" + unionid + "&nickname=" + userInfo.nickname);
				title = userInfo.nickname + "送了一本《" + bookname + "》给你，立即领取";
			}
			shareWx(title, cover, bookPush);
		};
		
		 /*
		 用来标记领取人状态
		 0 分享人自己打开，且书籍未被领取
		 1 分享人成功获得这本书
		 2 领取人是会员
		 3 领取人已购买
		 4 领取人已领2次
		 5 领取人成功领取
		 6 领取人已领过
		 7 来晚一步，被人领取
		 */
		var receiveStatus;

		var updateReceiveData = function(dict){
			var indate;
			if (dict.userInfo) {//已经被领取
				indate = getIndate(dict.userInfo.indate);
			}
			if (unionid == unionid2) { //分享人自己打开
				$('.giveBtn').addClass('hide');
				$('.top_desStr').removeClass('hide');
				$('.top_desStr1').addClass('hide');
				$('.top_receiveInfo').addClass('hide');
				if (dict.isbook) {//已经被领取
					receiveStatus = 1;
					$('.giveBtn').removeClass('hide');
					$('.top_desStr').addClass('hide');
					$('.top_desStr1').removeClass('hide');
					$('.top_desStr1').text("好友已领取，你已免费获得这本书");
					$('.giveBtn').text('进入蜜读，阅读本书');
					$('.top_receiveInfo').removeClass('hide');
					document.getElementsByTagName('img')[1].setAttribute('src',dict.userInfo.headimg);
					$('.top_receiveAuthor').text(dict.userInfo.nickname);
					$('.top_receiveDate').text(indate);
                    // $('#book_receive_top_img').prop('src',ercode)
                } else{//未被领取
					receiveStatus = 0;
					$('.top_desStr').text("等待好友领取");
				}
			} else{ //他人打开
				$('.top_desStr').addClass('hide');
				$('.top_desStr1').removeClass('hide');
				$('.giveBtn').removeClass('hide');
				if (userVip.type == 1) { //领取人是会员
					receiveStatus = 2;
					$('.top_receiveInfo').addClass('hide');
					$('.top_desStr1').text('你已是会员，无法领取');
					$('.giveBtn').text('进入蜜读，阅读本书');
				} else{ //不是会员
				    console.log(unionid+'dr')
				    console.log(dict.isbook+'bok')
					if (dict.isbook && dict.userInfo.unionid == unionid) { //自己领取
						receiveStatus = 6;
						$('.top_desStr1').text("你已领取了这本书");
						$('.giveBtn').text('进入蜜读，阅读本书');
						$('.top_receiveInfo').removeClass('hide');
                        document.getElementsByTagName('img')[1].setAttribute('src',dict.userInfo.headimg);//头像
						$('.top_receiveAuthor').text(dict.userInfo.nickname);
						$('.top_receiveDate').text(indate);
					} else{
						if (dict.isorder == 1) { //领取人已购买
							receiveStatus = 3;
						    $('.top_receiveInfo').addClass('hide');
						    $('.top_desStr1').text('你已购买本书，无法领取');
						    $('.giveBtn').text('进入蜜读，阅读本书');
                           // $('#book_receive_top_img').prop('src',ercode)
                        } else{//未购买
							if (dict.isbook) {//他人领取
								receiveStatus = 7;
								$('.top_desStr1').text("来晚一步，已被领取");
								$('.giveBtn').text('进入蜜读，领取本书');
								$('.top_receiveInfo').removeClass('hide');
                                document.getElementsByTagName('img')[1].setAttribute('src',dict.userInfo.headimg);//头像
							    $('.top_receiveAuthor').text(dict.userInfo.nickname);
							    $('.top_receiveDate').text(indate);
							} else{//未被领取
								if (dict.count == 1) {//领取已满1次
									receiveStatus = 4;
								    $('.top_receiveInfo').addClass('hide');
								    $('.top_desStr1').text('你已通过“赠一得一”领满1本，无法再次领取');
								    $('.giveBtn').text('进入蜜读，领取本书');
                                } else{//未满1次
									receiveStatus = 5;
								    $('.top_receiveInfo').addClass('hide');
								    $('.top_desStr1').text("最多可通过“赠一得一免费领取1本。你免费领取后，" + nickname + "也将免费获得这本书");
								    $('.giveBtn').text('立即领取');
								}
							}
						}
					}
				}
			}

			var book_list = document.getElementById('book_list');
			var lineView = document.getElementById('lineView');
			if (receiveStatus == 0) {
				book_list.style.top = '45rem';
				lineView.style.top = '42rem';
			}else if (receiveStatus == 1 || receiveStatus == 6 || receiveStatus == 7) {
				book_list.style.top = '60rem';
				lineView.style.top = '57rem';
			}else {
				book_list.style.top = '52rem';
				lineView.style.top = '49rem';
			}
		}

		$('.giveBtn').click(function(){
            MtaH5.clickStat("receive_button")//点击统计
			//禁止滑动
            $('#book_receive_top_img').prop('src',ercode)
			document.body.style.overflow = 'hidden';
			window.addEventListener('touchmove',_preventDefault);
			$('.alertView').removeClass('hide');
			if (receiveStatus == 5) { //领取成功
				$('.alertView').addClass('hide');
                $('.book_receive_top_title').text('领取成功');
                $('.book_receive_top_des').text('进入蜜读公众号查看');
				toast.loading({
				title: "加载中",
				duration: 2000
			});
			    ercode = '';
				receiveBook(unionid,unionid2);
			}else if (receiveStatus == 6 ||receiveStatus == 2||receiveStatus==3||receiveStatus == 1){//领取人已经领过这本书
                $('.alertView').addClass('hide');
                MtaH5.clickStat('haoyouzhulimian',{'receivebutton':'true'})//漏斗统计
                var jumpUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize?';
                var redirectUrl = shareUrl+"bookDetail.html?bookid=" + bookid + "&videoauthorid=" + videoauthorid + "&copywriter=" + copywriter;

                var params = {
                    appid: appId,
                    redirect_uri: redirectUrl,
                    response_type: 'code',
                    scope: 'snsapi_userinfo',
                    state: 'xyz',
                };
                jumpUrl += $.param(params) + '#wechat_redirect';
                location.href = jumpUrl;




			}else if (receiveStatus == 1) {//分享人获得该书
                        // location.href=shareUrl + "auth.html?url="+encodeURIComponent(window.location.href.split(splitCode)[0])
				$('.book_receive_top_title').text('你已获得这本书');
				$('.book_receive_top_des').text('进入蜜读公众号查看');
			}else if (receiveStatus == 3) {//领取人已购买
				$('.book_receive_top_title').text('打开蜜读');
				$('.book_receive_top_des').text('');
			}else if (receiveStatus == 4) {//领取人已领满两本
				$('.book_receive_top_title').text('邀请好友一起读书');
				$('.book_receive_top_des').text('分享书籍给好友，书籍被领取后，你和好友将免费获得此书。');
			}else if (receiveStatus == 7) {//被他人领取
				$('.book_receive_top_title').text('邀请好友一起读书');
				$('.book_receive_top_des').text('分享书籍给好友，书籍被领取后，你和好友将免费获得此书。');
			}else{//其他
				$('.book_receive_top_title').text('邀请好友一起读书');
				$('.book_receive_top_des').text('分享书籍给好友，书籍被领取后，你和好友将免费获得此书。');
			}
		});
		
		var receiveBook = function(unionid,unionid2){
			var url = 'order/savegiveone?unionid=' + unionid + "&unionid2=" + unionid2 + "&bookid=" + bookid + "&channel=" + channel;
			$.ajax({
				type: "get",
				url: hostUrl + url,
				success: function(data) {
				    console.log(data)
                    $('.alertView').removeClass('hide');
					if (!data.data) {
					    /*
                            $('.book_receive_top_title').text('领取成功');
                            $('.book_receive_top_des').text('进入蜜读公众号查看');*/

						getUserInfo(1);
					}
				}
			});
		};
		
		var getIndate = function(indate) {
			if (!indate) {
				return "";
			}
			indate = indate.replace("-","/");
			indate = indate.replace("-","/");
			var time = (new Date().getTime() - new Date(indate).getTime()) / 1000;
			var dateArr = indate.split(' ');
			var time1 = parseInt(time / 60);
			var time2 = parseInt(time / 3600);
			var time3 = parseInt(time / 86400);
			if (time1 < 1) {//不足一分钟
				indate = "刚刚";
			}else if (time1 >= 1 && time2 < 1) {//不足一小时
				indate = time1 + "分钟前";
			}else if (time2 >= 1 && time3 < 1) {//不足一天
				indate = time2 + "小时前";
			}else if (time3 >= 1 && time3 < 2) {//不足两天
				indate = "昨天 " + dateArr[1];
			}else if (time3 >= 2 && time3 < 3) {//不足三天
				indate = "前天 " + dateArr[1];
			}else{
				indate = dateArr[0];
			}
			return indate;
		}
		
		function _preventDefault(e){
			e.preventDefault();
		}
        $(document).on('click','#book_receive_top_img',function () {
            MtaH5.clickStat("follow")//二维码点击事件
        })
		
		$('.follow-mask').click(function(){
			//恢复滑动效果
			document.body.style.overflow = 'auto';
			window.removeEventListener('touchmove', _preventDefault);
			$('.alertView').addClass('hide')
		});
		
		$('#free_book').on('click', '.book_img', function(e) {
			e.stopPropagation();
			e.cancelBubble = true;
			window.location.href = "activity_freeReceive.html";
		})
		
		$('#random_book').on('click', '.book_img', function(e) {
			e.stopPropagation();
			e.cancelBubble = true;
			var parent = $(this).parents('.random_Item_div')
			window.location.href = "bookDetail.html?bookid=" + parent.attr('data-bookid') + "&videoauthorid=" + parent.attr('data-videoauthorid') + "&copywriter=" + parent.attr('data-copywriter');
		})

	</script>
</html>